<!DOCTYPE html>
<html lang="zh-Hans">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
  <title>GameOfLife</title>
  <link rel="shortcut icon" href="icon.png" type="image/x-icon">
  <style>
    canvas {
      background: white;
      margin: 24px auto;
      display: block;
      border: 1px solid black;
      box-shadow: 0px 0px 10px black;
    }

    div {
      text-align: center;
    }
  </style>
  <script src="./js/gameOfLifeGpu.js"></script>
</head>

<body style="user-select:none;">
  <h1 style="text-align:center;margin-top: 20px;">左键铅笔，中键橡皮, 右键拖动，滚轮缩放，使用笔的时候请先按暂停</h1>
  <div id="game"></div>
  <div id="control">
    <input type="button" id="start" value="暂停/开始(s)">
    <input type="button" id="debug" value="单帧调试(x)">
    <input type="button" id="clear" value="清屏(Delete)">
    <br>
    <br>
    <label for="speed">速度:</label>
    <input type="range" id="speed" min="1" max="200" value="185">
    <label for="brush-size">&nbsp&nbsp画刷大小:<span id="n-brush-Size">40</span></label>
    <input type="range" id="brush-size" min="1" max="400" value="40">
    <label for="tool">&nbsp&nbsp切换工具(t)：</label>
    <select name="tool" id="tool">
      <option value="铅笔" selected="true">铅笔</option>
      <option value="橡皮">橡皮</option>
      <option value="移动">移动</option>
    </select>
    <br>
    <br>
    <input type="button" onclick="window.location.reload()" value="重开(r)">
    <label for="heat-death">&nbsp&nbsp热寂效果：</label>
    <input type="checkbox" id="heat-death" checked="true">
    <label for="border">&nbsp&nbsp有限无边：</label>
    <input type="checkbox" id="border" checked="true">
    <input type="button" id="back2Cpu" value="回到CPU版本">
    <br>
    <br>
    <div style="display: inline-block">
      <label for="load-image">加载一张图片(部分游览器可能无效)：</label>
      <br>
      <br>
      <input type="file" id="load-image" accept="image/png, image/jpeg">
      <input type="button" id="test-image" value="默认图片">
    </div>
    <div style="display: inline-block">
      <label for="save">无法保存?,请使用chrome(或360极速模式)</label>
      <br>
      <br>
      <input type="button" id="save" value="存档">
    </div>
    <br>
    <br>
  </div>
</body>

</html>